<template>
  <div id="employee" class="list">
    <div class="breadcrumb">
  		<Breadcrumb separator=">">
        <BreadcrumbItem to="">系统维护</BreadcrumbItem>
        <BreadcrumbItem to="/system/employee">用户设置</BreadcrumbItem>
    	</Breadcrumb>

			<div class="btns">
				<ButtonGroup>
	        <Button type="text" @click="openAdd"><i class="fa fa-plus"></i><span>新增用户</span></Button>
	    	</ButtonGroup>
			</div>
    </div>

		<div class="search">
      <Form>
  			<Row :gutter="16">
  				<Col :md="24">
            <FormItem>
		          <Input placeholder="请输入用户名称" v-model="sEmpName"></Input>
            </FormItem>
  				</Col>
  			</Row>
      </Form>
			<Button type="primary" class="search-btn" icon="search" @click="search" long>查询</Button>
		</div>

    <div class="table-content">
			<div class="table">
				<table>
					<thead>
						<th>姓名</th>
						<th>登录名</th>
						<th>手机</th>
						<th>电子邮箱</th>
						<th>是否启用</th>
						<th>创建时间</th>
						<th>操作</th>
					</thead>
					<tbody>
						<tr v-for="(v,i) in pageData.thisPageElements" :key="`employee-list-key-${v.id}`">
							<td>{{v.empName}}</td>
							<td>{{v.loginName}}</td>
							<td>{{v.phone}}</td>
							<td>{{v.email}}</td>
							<td>{{v.enable ? '是':'否'}}</td>
							<td>{{moment(v.createtime).format('YYYY-MM-DD')}}</td>
							<td>
								<a @click="openView(v.id)">查看</a>
								<a v-if="v.isdefault === 0" @click="openEdit(v.id)">修改</a>
								<a v-if="v.isdefault === 0" @click="doResetPassword(v)">重置密码</a>
								<a v-if="v.isdefault === 0" @click="doDisable(v)">{{v.enable === 1 ? '禁用':'启用'}}</a>
								<a v-if="v.isdefault === 0" @click="doDelete(v)">删除</a>
							</td>
						</tr>
            <tr v-if="!isLoading && pageData.totalNumberOfElements <= 0">
              <td colspan="7">暂无数据</td>
            </tr>
					</tbody>
				</table>
			</div>

			<Page :total="pageData.totalNumberOfElements" :page-size="pageData.pageSize" :current="current" @on-change="loadPage" show-total></Page>
			<Spin size="large" fix v-if="isLoading"></Spin>
		</div>

    <EmployeeModal :value="empid" :show="modal" :options="empopts" @close="closeModal" @add="onAdd" @edit="onEdit"></EmployeeModal>
  </div>
</template>

<style lang="less" scoped>
	#employee {
	}
</style>

<script>
	import {mapState,mapActions} from 'vuex'
  import moment from 'moment'
  import EmployeeModal from './EmployeeModal'

  export default {
    components:{
      EmployeeModal
    },
    data(){
      return {
        current:1,
        sEmpName:'',
        modal:false,
        empid:'',
        modalTitle:'',
        modalIsEdit:false,
        submitForm:{}
      }
    },
    computed:{
      ...mapState('system/employee',['pageData','isLoading']),
      empopts(){
        return {isedit:this.modalIsEdit,title:this.modalTitle};
      }
    },
    methods:{
      moment,
      ...mapActions('system/employee',['reload','resetPassword','disableEmployee','deleteEmployee']),
      search(){
        this.submitForm = {name:this.sEmpName};
        this.loadPage(1);
      },
      loadPage(e){
        this.current = e;
        this.reload({pageNum:this.current,...this.submitForm});
      },
      openView(id){
        this.empid = id;
        this.modalTitle = '查看用户信息';
        this.modalIsEdit = false;
        this.modal = true;
      },
      openEdit(id){
        this.empid = id;
        this.modalTitle = '编辑用户信息';
        this.modalIsEdit = true;
        this.modal = true;
      },
      openAdd() {
        this.empid = '';
        this.modalTitle = '新增用户';
        this.modalIsEdit = true;
        this.modal = true;
      },
      onAdd(){
        this.loadPage(1);
      },
      onEdit(){
        this.loadPage(this.current);
      },
      closeModal(){
        this.modal = false;
      },
      doResetPassword(v){
        this.$Modal.confirm({
          title: '重置密码',
          content: `是否将账户“${v.loginName}”的密码重置为“账号+888”？`,
          loading: true,
          onOk:async ()=>{
          	let res = await this.resetPassword({id:v.id,loginName:v.loginName});
          	if(res.success){
          		this.$Modal.remove();
          		this.$Message.success('重置密码成功');
						}else{
							this.$Modal.remove();
							this.$Message.error(res.msg);
						}
          }
        });
      },
			deleteLoadPage(){
				let total = this.pageData.totalNumberOfElements - 1;
				let pageSize = parseInt(total / this.pageData.pageSize) + (total % this.pageData.pageSize > 0 ? 1 : 0);
				if (this.current > 1 && this.current > pageSize) {
					this.current--;
				}
				this.loadPage(this.current);
			},
      doDisable(v){
        let str = v.enable === 1 ? '禁用':'启用';
        this.$Modal.confirm({
          title: `${str}账户`,
          content: `是否将账户“${v.loginName}”${str}？`,
          loading: true,
          onOk:async ()=>{
          	let res = await this.disableEmployee({id:v.id,enable:v.enable === 1 ? 0:1});
          	if(res.success){
          		this.$Modal.remove();
              this.deleteLoadPage();
          		this.$Message.success('操作成功');
						}else{
							this.$Modal.remove();
							this.$Message.error(res.msg);
						}
          }
        });
      },
      doDelete(v){
        this.$Modal.confirm({
          title: '删除账户',
          content: `是否将账户“${v.loginName}”删除？`,
          loading: true,
          onOk:async ()=>{
            let res = await this.deleteEmployee({id:v.id});
            if(res.success){
              this.$Modal.remove();
              this.loadPage(this.current);
              this.$Message.success('删除成功');
            }else{
              this.$Modal.remove();
              this.$Message.error(res.msg);
            }
          }
        });
      }
    }
  };
</script>
